<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受保护的iframe内容</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">受限内容访问</h2>
            
            <!-- 加载状态 -->
            <div id="loading" class="text-center py-8">
                <i class="fa fa-circle-o-notch fa-spin text-blue-500 text-3xl mb-4"></i>
                <p class="text-gray-600">验证您的访问权限...</p>
            </div>
            
            <!-- 未关注用户看到的提示 -->
            <div id="unfollowed" class="hidden text-center py-8">
                <i class="fa fa-lock text-red-500 text-4xl mb-4"></i>
                <p class="text-gray-600 mb-6">您需要关注后才能访问此内容</p>
                <button id="followBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300">
                    <i class="fa fa-plus mr-2"></i>关注以访问
                </button>
            </div>
            
            <!-- iframe容器（仅对已关注用户显示） -->
            <div id="iframeContainer" class="hidden border rounded-md overflow-hidden">
                <div class="bg-gray-50 px-4 py-2 border-b flex justify-between items-center">
                    <span class="text-sm text-gray-600">受保护内容</span>
                    <button id="refreshBtn" class="text-blue-500 hover:text-blue-700 text-sm">
                        <i class="fa fa-refresh mr-1"></i>刷新
                    </button>
                </div>
                <div id="iframeWrapper"></div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时验证用户关注状态
        document.addEventListener('DOMContentLoaded', function() {
            verifyUserStatus();
            
            // 关注按钮点击事件
            document.getElementById('followBtn').addEventListener('click', function() {
                followUser().then(success => {
                    if (success) {
                        // 关注成功后重新验证状态
                        verifyUserStatus();
                    }
                });
            });
            
            // 刷新按钮点击事件
            document.getElementById('refreshBtn').addEventListener('click', function() {
                loadProtectedContent();
            });
        });
        
        // 验证用户是否已关注
        async function verifyUserStatus() {
            try {
                // 调用后端API验证用户关注状态
                const response = await fetch('/api/check-follow-status', {
                    method: 'GET',
                    credentials: 'include', // 包含cookie，用于身份验证
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                const result = await response.json();
                
                if (result.followed) {
                    // 已关注，加载受保护内容
                    document.getElementById('loading').classList.add('hidden');
                    document.getElementById('iframeContainer').classList.remove('hidden');
                    loadProtectedContent();
                } else {
                    // 未关注，显示提示
                    document.getElementById('loading').classList.add('hidden');
                    document.getElementById('unfollowed').classList.remove('hidden');
                }
            } catch (error) {
                console.error('验证用户状态失败:', error);
                alert('验证失败，请刷新页面重试');
            }
        }
        
        // 加载受保护的iframe内容
        async function loadProtectedContent() {
            try {
                // 获取加密的临时访问链接（而非直接使用真实URL）
                const response = await fetch('/api/get-protected-content-token', {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                const result = await response.json();
                
                if (result.success && result.token) {
                    // 使用临时令牌动态创建iframe
                    const iframeWrapper = document.getElementById('iframeWrapper');
                    // 先清除现有iframe
                    iframeWrapper.innerHTML = '';
                    
                    // 创建新iframe
                    const iframe = document.createElement('iframe');
                    // 使用令牌作为参数，而非直接暴露真实URL
                    iframe.src = `/api/protected-content?token=${result.token}`;
                    iframe.width = '100%';
                    iframe.height = '400';
                    iframe.frameBorder = '0';
                    // 添加安全属性
                    iframe.sandbox = 'allow-same-origin allow-scripts';
                    iframe.allow = 'fullscreen';
                    
                    // 添加加载状态
                    iframeWrapper.innerHTML = '<div class="text-center py-10"><i class="fa fa-circle-o-notch fa-spin text-blue-500"></i> 加载内容中...</div>';
                    
                    // 内容加载完成后移除加载状态
                    iframe.onload = function() {
                        iframeWrapper.innerHTML = '';
                        iframeWrapper.appendChild(iframe);
                    };
                    
                    // 延迟添加iframe，增加通过F12查找的难度
                    setTimeout(() => {
                        if (iframeWrapper.querySelector('.fa-spin')) {
                            iframeWrapper.innerHTML = '';
                            iframeWrapper.appendChild(iframe);
                        }
                    }, 1000);
                } else {
                    alert('获取内容失败，请重试');
                }
            } catch (error) {
                console.error('加载受保护内容失败:', error);
                alert('加载失败，请重试');
            }
        }
        
        // 关注用户
        async function followUser() {
            try {
                const response = await fetch('/api/follow-user', {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                const result = await response.json();
                return result.success;
            } catch (error) {
                console.error('关注失败:', error);
                return false;
            }
        }
        
        // 防止简单的右键查看源代码
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
        
        // 监听F12按键，增加查看难度（不能完全阻止，但能增加门槛）
        document.addEventListener('keydown', function(e) {
            // F12或Ctrl+Shift+I/Ctrl+U等组合键
            if (e.key === 'F12' || 
                (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'J')) ||
                (e.ctrlKey && e.key === 'U')) {
                e.preventDefault();
                alert('此操作已被限制');
            }
        });
    </script>
</body>
</html>
